/*
This is just a test file for making sure the script is working properly.
If it is, the media queries below will change the body's background color depending on the browser width.
For a realistic use case for media queries: read up on Responsive Web Design: 
http://www.alistapart.com/articles/responsive-web-design/
*/

body {
	background: black;
	color: #333;
	font-family: Helvetica, sans-serif;
}
p {

}
a {
	color: #333;
}

/* hide the attribute-test element. test2.css will show it */
#attribute-test {
	display: none;
}

/*styles for 300 and up @ 16px!*/
/* The max-width declaration below blocks this from ever working */
@media only screen and (min-width: 18.75em){//
	body {
		background: yellow;
	}
}


/*styles for 480px - 620px @ 16px!*/
@media only screen and (min-width: 30em) and (max-width: 38.75em) {
	body {
		background: green;
	}
}
/*styles for 480px - 620px @ 16px!*/
@media all and (max-width: 640px) {
	.logo{ width:100%;margin:0 auto;display:block;max-width:386px;height:auto;max-height:391px;}
	.ios{height:63px;width:192px;background:url('Test/apple-button.png') center;position:relative;left:50%;margin-left:-100px;margin-top:20px}
	.android{height:63px;width:192px;background:url('Test/android-button.png') center;position:relative;left:50%;margin-left:-100px;margin-top:20px}
	.popup{position:absolute;top:-142px;left:180px;display:none}
	.android:hover .popup,.ios:hover .popup{
		display:block;
	}
	.menu{height:40px;background:red;line-height:40px;}
	.menu .drop{width:100%;background:#fff;height:140px;display:none}
	.menu:hover .drop{display:block}
}
@media all and (min-width: 640px) {
	.logo{ width:100%;margin:0 auto;display:block;max-width:386px;height:auto;max-height:391px;}
	.ios{height:63px;width:192px;background:url('Test/apple-button.png') center;position:absolute;left:50%;margin-left:-200px;margin-top:20px}
	.android{height:63px;width:192px;background:url('Test/android-button.png') center;position:absolute;left:50%;margin-left:20px;margin-top:20px}
	.popup{position:absolute;top:-142px;left:180px;display:none}
	.android:hover .popup,.ios:hover .popup{display:block;}
	.menu{height:80px;background:red;position:fixed;width:100%;bottom:0;left:0}
	.menu .drop{display:none}
}


@media screen and (min-width: 38.75em),only print,projector{body{background:red;}}

/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
	body {
		background: blue;
	}
}

/*styles for 1100px and up @ 16px!*/
@media screen and (min-width: 68.75em){
	body {
		background: orange;
	}
}

/*one with pixels too! */
/* NOTE - if the user were to increase his browser font size to 20px (chrome: Large), 
			the above (68.75em) media query will be incorrectly ignored!!!
			
			Assuming 20px browser setting, we would expect to see this progression:
			yellow > green > red > blue > NAVY > orange
			
			However, the orange never kicks in... which seems like a browser bug!
			Here's the math (assuming 20px browser setting):
			1200/20 = 60em     <     68.75em
*/
@media screen and (min-width: 1200px){
	body {
		background: navy;
	}
}